<template>
    <view>
		<!--头部-->
		<view class="d-beijing-gao-350" :style="{backgroundImage: 'url(' + domain +'/static/default/web/img/beijing-bangzhu.jpg)'}">
		    <u-navbar-tm
				title="举报中心"
				:bgColor="bgColor"
			>
			<view slot="left">
				<u-icon
					name="arrow-left"
					@click="fanhui()"
					size="19"
				></u-icon>
			</view>
			</u-navbar-tm>
		</view>
		<view class="d-kuan d-gao-30 d-fugao-30 " style="background-color: #ffffff;border-radius: 20px 20px 0 0;">
			<view class="d-kuan d-fugao-50 " style="">
				<view class="d-neikuang-10 d-buhuanhang ">
					<view class="d-gaokuang-40 d-kuanggao-70 d-yuanjiao-40 d-zuo-10 ">
						<image src="/static/images/img/jubao2.png" mode="aspectFill" class="d-img-70 d-yuanjiao-50 d-beijing-bai d-yinying-5"></image>
					</view>
		
					<view class="d-kuan d-zuo-10">
						<view class="d-wenzi-14 d-jiacu">举报中心</view>
						<view class="d-wenzi-14 d-wenzi-yanse-bai-0 ">不良信息，违规账号</view>
					</view>
				</view>
			</view>
			<view class="d-clear"></view>
		</view>
		<!--导航-->
		<u-sticky bgColor="#fff">
		    <u-tabs-d :list="daohanglist" @click="lanmulistid" lineColor="#d95428"></u-tabs-d>
		</u-sticky>

		<!-- 列表template模板 -->
		<view class="d-kuan">
			<block data-type="template" data-is="tempCommonList" data-attr="postsList:postsList,listAdsuccess:listAdsuccess">
				<block v-for="(item, index) in postsList" :key="index">
					<view class="d-kuan">
						<view class="d-waikuang-10">
							<view class="d-kuan d-beijing-bai d-yuanjiao-10">
								<view class="d-neikuang-10 d-buhuanhang">
									<!--头像-->
									<view class="d-gaokuang-40 d-kuanggao-40 d-yuanjiao-40 ">
										
										<image src="/static/assets/images/avatar.png" mode="aspectFill" class="d-img-40 d-yuanjiao-50 "></image>
									</view>
									<view class="d-kuan d-zuo-10"  @click="tiezi(item.id)">
										<view class="d-wenzi-18 d-jiacu d-chaochu-1">{{item.title}}</view>
										<view class="d-wenzi-14 d-wenzi-yanse-hui">阅读：{{item.hits}} </view>
									</view>
									<view class="d-kuan-80 d-neirong-you" >
										<view class="d-kuan-40 d-beijing-hui-f6 d-neikuang-zuoyou-2-shangxia-4 d-wenzi-12 d-yuanjiao-50 d-neirong-juzhong" >{{item.catname}}</view>
									</view>
								</view>
								<view class="d-zuoyou-neikuang-10 d-xia-10-nei">
									<!--标题-->
									
									<view class="d-zuo-50 d-wenzi-14 d-wenzi-huanhang d-xia-10" @click="tiezi(item.id)">
										<u-parse :content="item.description"></u-parse>
									</view>
									
									<view class="d-clear"></view>
									
									
								</view>
							</view>
							<!--评论-->
							<view class="">
								
							</view>
						</view>
					</view>
				</block>
			</block>
			<u-loading-icon text="加载中..." textSize="18" :show="xialajiazai" ></u-loading-icon>
			<view :style="'display:' + (isLoading?'block':'none')">
				<template is="tempLoading"></template>
			</view>
			<view class="loadingmore" :style="'display:' + floatDisplay">
				<view class="no-more" :hidden="!isLastPage">- 无更多文章 -</view>
			</view>
			<u-divider text="已经到底啦 !" v-if="daodi">{{daodi}}</u-divider>
			<!-- 版权信息template模板 -->
			<view class="copyright" :style="'display:' + floatDisplay">
				<block data-type="template" data-is="tempCopyright" data-attr="webSiteName:webSiteName,domain:domain">
					<view> {{webSiteName}} </view>
					<view> {{banbenhao}} </view>
				</block>
			</view>
		</view>
		<!-- 无法访问网络 -->
		<view class="showerror" :style="'display:' + showerror">
			<!--image src="/static/images/cry80.png" style="height:100rpx;width:100rpx"></image-->
			<view class="errortext">
				暂时无法访问网络，下拉重试...
			</view>
		</view>
		<!--u-tabbar
			:value="value"
			@change="name => value = name"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
			activeColor="#d95428"
		>
			<u-tabbar-item text="提交反馈" icon="plus-circle-fill" ></u-tabbar-item>
		</u-tabbar-->
	</view>
</template>

<script>
import toubu from "@/components/toubu/toubu";  //引入组件
var Api = require("../../utils/api.js");
var util = require("../../utils/util.js");

var wxApi = require("../../utils/wxApi.js");
var wxRequest = require("../../utils/wxRequest.js");
import config from "../../utils/config";
var pageCount = config.getPageCount;
var webSiteName = config.getWebsiteName;
var domain = config.getDomain;
var topNav = config.getIndexNav;
var banbenhao = config.getDuixinbanbenhao;
export default {
  data() {
    return {
      postsList: [],
	  tubiaoList: [],
      postsShowSwiperList: [],
      isLastPage: false,
      page: 1,
	  swiperheight: '',
	  swiperItemHeight: '',
      search: '',
      categories: 0,
      showerror: "none",
      showCategoryName: "",
      categoryName: "",
      showallDisplay: "block",
      displayHeader: "none",
      displaySwiper: "none",
      floatDisplay: "none",
      displayfirstSwiper: "none",
      topNav: topNav,
      webSiteName: webSiteName,
      domain: domain,
      isFirst: false,
      // 是否第一次打开,
      isLoading: false,
	  uid:'',
	  zanzhi: false,
	  userInfo:'',
	  banbenhao:banbenhao,
	  daodi: false,
	  //下拉加载提示
	  xialajiazai: false,
	  bgColor: '',
	  daohanglist:[],
	  value:0
    };
  },
	mounted() {
		
	},
  components: {
	  toubu,
  },
  props: {},
  onPageScroll: function (e) {
  	  var duixin = this;
  	  var yanse = e.scrollTop;
  	  if(yanse == 0) {
  	  	duixin.bgColor = 'rgba(0, 0, 0, 0)';
  	  } else if(yanse > 150){
  	  	duixin.bgColor = 'rgba(255 255 255)';
  	  }
  	  //console.log("yanse",duixin.bgColor);
  },
  onShareAppMessage: function () {
    return {
      title: '“' + webSiteName + '”小程序',
      path: 'pages/index/index',
      success: function (res) {// 转发成功
      },
      fail: function (res) {// 转发失败
      }
    };
  },
  onPullDownRefresh: function () {
    var self = this;
    self.setData({
      showerror: "none",
      showallDisplay: "block",
      displaySwiper: "none",
      floatDisplay: "none",
      isLastPage: false,
      page: 1,
      postsShowSwiperList: []
    });
    this.fetchTopFivePosts();


    this.fetchPostsData(self);
  },
  onReachBottom: function () {
    var self = this;
    if (!self.isLastPage) {
      self.setData({
        page: self.page + 1,
		xialajiazai: true,
      });
      //console.log('当前页' + self.page);
      this.fetchPostsData(self);
    } else {
      //console.log('最后一页');
    }
  },
  onLoad: function (options) {
    uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#bd5551',
        animation: {
            duration: 400,
            timingFunc: 'easeIn'
        }
    });
    var self = this;
	self.getDaohanglistData();
	var isFirstStorage = uni.getStorageSync('isFirst'); // console.log(isFirstStorage);
	var userInfo = uni.getStorageSync('userInfo');
	self.userInfo = userInfo;
    self.fetchTopFivePosts();
	//console.log("userInfo1",userInfo);
	if (userInfo) {
		self.showuid = true;
		var member = uni.getStorageSync('member');
		var uid = uni.getStorageSync('memberuid');
		self.uid = uid;
		//console.log("member1",self.uid);
		//console.log("userInfo1",userInfo);
		//self.fetchPostsData(self);
	} else {
		self.uid = '';
		//self.fetchPostsData(self);
	}
	self.fetchPostsData(self); // 判断用户是不是第一次打开，弹出添加到我的小程序提示

    if (!isFirstStorage) {
      self.setData({
        isFirst: true
      });
      uni.setStorageSync('isFirst', 'no'); // console.log(uni.getStorageSync('isFirst'));
      setTimeout(function () {
        self.setData({
          isFirst: false
        });
      }, 5000);
    }
  },
	onReady() {
		this.$nextTick(() => {
		uni.createSelectorQuery().in(this).select('.swiper-item-img').boundingClientRect(data => {
		console.log(data)
		}).exec()
		});
	},

  onShow() {
	
	this.$nextTick(() => {
		//this.getGao();
	});
    uni.setStorageSync('openLinkCount', 0);
    var nowDate = new Date();
    nowDate = nowDate.getFullYear() + "-" + (nowDate.getMonth() + 1) + '-' + nowDate.getDate();
    nowDate = new Date(nowDate).getTime();
  },
    methods: {


		formSubmit: function (e) {
		  var url = '../list/list';
		  var key = '';
			 //console.log('earch');
			  if (e.currentTarget.id == "search-input") {
				key = e.detail.value;
			  } else {
				key = e.detail.value.input;
			  }

			  if (key != '') {
				url = url + '?search=' + key;
				uni.navigateTo({
				  url: url
				});
			  } else {
				uni.showModal({
				  title: '提示',
				  content: '请输入内容',
				  showCancel: false
				});
			  }
		},
		
		fetchTopFivePosts: function () {
		  var self = this; //获取滑动图片的文章
		  var getPostsRequest = wxRequest.getRequest(Api.getSwiperUrl());
		  getPostsRequest.then(response => {
			
			if (response.data.code == 1) {
			  self.setData({
				postsShowSwiperList: self.postsShowSwiperList.concat(response.data.data.map(function (item) {
				  if (!item.thumb) {
					item.thumb = "/static/images/logo700.png";
				  }
				  item.redicttype = 'apppage';
				  item.url = '../detail/detail?id=' + item.id;
				  return item;
				})),
				displaySwiper: "block"
			  });
			  
			} else {
			  self.setData({
				displaySwiper: "none"
			  });
			}
		  }).catch(function (response) {
			console.log(response);
			self.setData({
			  showerror: "block",
			  floatDisplay: "none"
			});
		  }).finally(function () {});
		},
		//获取列表数据
		fetchPostsData: function (data) {
		  var self = this;
		  if (!data) data = {};
		  if (!data.page) data.page = 1;
		  if (!data.categories) data.categories = 0;
		  if (!data.search) data.search = '';
		  if (self.uid) data.uid = self.uid;
		  console.log('data:',data);

		  if (data.page === 1) {
			self.setData({
			  postsList: []
			});
		  };
		  self.setData({
			isLoading: true
		  });
			var getJubaolistRequest = wxRequest.getRequest(Api.getJubaolist(data)+'&uid='+self.uid);
			getJubaolistRequest.then(response => {
				//console.log(response.data.data);
			if (response.data.code == 1) {
				if (response.data.data.length) {
				  if (response.data.data.length < pageCount) {
					self.setData({
					  isLastPage: true,
					  isLoading: false
					});
				  }

				  self.setData({
					floatDisplay: "block",
					postsList: self.postsList.concat(response.data.data.map(function (item) {
				
					  if (item.thumb == null || item.thumb == '') {
						item.thumb = "/static/images/logo700.png";
					  }

					  return item;
					}))
				  });
				} else {
				  if (response.data.code == "rest_post_invalid_page_number") {
					self.setData({
					  isLastPage: true,
					  isLoading: false
					});
					uni.showToast({
					  title: '没有更多内容',
					  mask: false,
					  duration: 1500
					});
				  } else {
					  // 隐藏提示
					/*uni.showToast({
					  title: response.data.message,
					  duration: 1500
					});*/
					self.daodi = true;
					uni.showToast({
					  title: '没有更多内容',
					  duration: 500
					});
				  }
				}
			  }
			}).catch(function (response) {
			  if (data.page == 1) {
				self.setData({
				  showerror: "block",
				  floatDisplay: "none"
				});
			  } else {
				uni.showModal({
				  title: '加载失败',
				  content: '加载数据失败,请重试.',
				  showCancel: false
				});
				self.setData({
				  page: data.page - 1
				});
			  }
			}).finally(function (response) {
			  uni.hideLoading();
			  self.setData({
				isLoading: false
			  });
			  uni.stopPullDownRefresh();
			});
		},
		//加载分页
		loadMore: function (e) {
		  var self = this;

		  if (!self.isLastPage) {
			self.setData({
			  page: self.page + 1
			}); //console.log('当前页' + self.data.page);

			this.fetchPostsData(self);
		  } else {
			uni.showToast({
			  title: '没有更多内容',
			  mask: false,
			  duration: 1000
			});
		  }
		},

		
		//返回
		fanhui() {
			const pages = getCurrentPages();  //判断跳转了多少页
			if (pages.length === 2) {  
				uni.navigateBack({
					delta: 1
				});
			} else if (pages.length === 1) { //如果没有上一页返回首页
				uni.switchTab({
					url: '/pages/index/index',
				})
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
			
		},
		//导航
		getDaohanglistData(){
			var duixin = this;
			var getJubaodaohangRequest = wxRequest.getRequest(Api.getJubaodaohang());
			var res;
			getJubaodaohangRequest.then(response => {
				res = response;
				if(res.data.code) {
					var lists = res.data.data;
					let list = []; 
					for (const i in lists) {
						list.push({
							name: lists[i].name,
							id: lists[i].id
						});
					}
					duixin.daohanglist = list;
					console.log('list',list);
				} else {

				  uni.showModal({
				  	title: '请先登录',
				  	//content: '请先登录',
				  	confirmText: '前往登录',
				  	success: function(res) {
				  		if (res.confirm) {
				  			uni.redirectTo({
				  				url: '/pages/login/login'
				  			});
				  		}
				  	}
				  });
				  
				}
			})
		},
		//帖子内容
		tiezi(id){
			var duixin = this;
			//console.log('查看帖子');
			var url = '../bangzhu/tiezi?id='+id;
			uni.navigateTo({
				url: url
			});
		},
		lanmulistid(data){
			//console.log('查看帖子id',data.id);
			var daohangdata = {
				categories : data.id,
			};
			this.fetchPostsData(daohangdata);
		}
    },
	computed: {
		
	},

};
</script>
<style>

page {
	background-color: #f3f4f7;
}
</style>